<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .happy {
      width: 400px;
      height: 100px;
      background-color: red;
    }

    .sad {
      width: 400px;
      height: 100px;
      background-color: green
    }

    .normal {
      width: 400px;
      height: 100px;
      background-color: #bbffaa
    }

    .atguigu1 {
      width: 400px;
      height: 100px;
      background-color: orange;
    }

    .atguigu2 {
      width: 400px;
      height: 100px;
      font-size: 50px;
    }

    .atguigu3 {
      width: 400px;
      height: 100px;
      border: 2px solid red;
      border-radius: 5px;
    }
  </style>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器 -->
  <div id="root">
    <!-- 绑定class 样式--字符串写法，适用于:样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br /><br />

    <!-- 绑定class 样式--数组写法，适用于:要绑定的样式个数不确定，名字也不确定 -->
    <div class="basic" :class="classArr">{{name}}</div><br /><br />

    <!-- 绑定class 样式--对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
    <div class="basic" :class="classObj">{{name}}</div><br /><br />
    <!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="styleObj">{{name}}</div>
  </div>
</body>

<script type="text/javascript">

  const vm = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
      mood: 'normal',
      classArr: ['atguigu1', 'atguiau2', 'atguigu3'],
      classObj: {
        atguigu1: false,
        atguigu2: false,
      },
      styleObj: {
        fontSize: '40px',
        color: 'red',
        backgroundColor: 'skyblue'
      }
    },
    methods: {
      changeMood() {
        const arr = ['happy', 'sad', 'normal']
        const index = Math.floor(Math.random() * 3)
        this.mood = arr[index]
      }
    },
  })
</script>

</html>